<template>
  <div>
    <div class="example">
      小记🐥：computed中testEqual的第一个参数等于当前组件this嘛？--
      <span class="bg-danger">{{ testEqual }}</span>
    </div>
    <!-- 防抖 -->
    <el-button type="primary" @click="alertTitle($event)">
      useLodashDebounceInVue
    </el-button>
    <el-button type="primary" @click="alertMessage($event)">
      alertMessage
    </el-button>
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  name: 'DebounceAndThrottle',
  components: {},
  data() {
    return {
      fun: function () {
        alert('000')
      }
    }
  },
  created() {
    // 使用Lodash实现防抖，为了防止组件在复用时使用相同的防抖函数，因此在生命周期中添加防抖函数
    this.alertTitle = _.debounce(this.debounceAlertTitle, 500)
    this.alertMessage = _.debounce(this.debounceAlertMessage, 800)
  },
  methods: {
    debounceAlertTitle(e) {
      // console.log(this, this.$root)
      console.log(e.target)
      console.log(123)
    },
    debounceAlertMessage() {
      this.$message({
        type: 'success',
        message: '点击了'
      })
    }
  },
  activated: {},
  deactivated: {},
  unmounted() {
    // 移除组件时 取消定时器
    this.alertTitle.cancel()
    this.alertMessage.cancel()
  },
  computed: {
    testEqual(thisVue, rootVue) {
      console.log(arguments)
      console.log(this.$root === rootVue) // false
      console.log(this.$root === this.$root.$root) // true
      console.log(window.window === globalThis.window) // true
      return this === thisVue // true
    }
  }
}
</script>
<style lang="less" scoped></style>
